import React, { useEffect } from 'react';

import SideMenu from '../../components/sandbox/SideMenu';
import TopHeader from '../../components/sandbox/TopHeader';

import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

import './NewsSandBox.css';
import NewsRouter from '../../components/sandbox/NewsRouter';
import { Layout } from 'antd'; 
const {Content} = Layout;

export default function NewsSandBox() {
    // useEffect的用法详细: https://blog.csdn.net/m0_56860427/article/details/120662814
    NProgress.start();
    useEffect(() => {
        NProgress.done();
    });
    return (
        <Layout>
            <SideMenu></SideMenu>
            <Layout className='site-layout'>
                <TopHeader></TopHeader>
                <Content  className='site-layout-background'
                          stype={{
                                margin: '24px 16px',
                                padding:24,
                                minHeight: 280
                            }}>
                   <NewsRouter></NewsRouter>
                </Content>
            </Layout>
        </Layout>
    )
}